<template>

	<div id="disk" style="cursor:default;" onselectstart="return false">

		<div style="width: 100%;height: 10vh;">

			<div style="height: 30px;width: 100%;">

				<div style="display: flex;justify-content:space-between;">

					<Row type="flex" justify="start" class="code-row-bg" style="float: left;padding-right: 5px; height: 40px;line-height: 60px;">

						<div style="float:left; margin-left:10px; line-height: 40px;">

							<h1>{{filetxt}}</h1>

							<Button size="small" icon="ios-add-circle" @click="NewFolder = true">新建</Button>
							<Button size="small" icon="ios-cloud-upload" @click="">上传</Button>
							<Modal title="新建文件夹" v-model="NewFolder" @on-ok="YesFolder">

								<Input v-model="FolderValue" placeholder="请输入新建文件夹的名称……" style="width: 100%;" />

							</Modal>

						</div>

					</Row>

					<div style="display: flex;align-items: center;">

						<div style="height: 40px;">

							<i-switch size="small" style="margin-top: 12px;float: right;margin-right: 10px;" />

							<Input suffix="ios-search" size="small" placeholder="搜索" style="margin-top: 7px; width: auto; float: right; margin-right: 10px;" />

						</div>

					</div>

				</div>

			</div>

			<div style="width: 100%;height: 30px;background: #000099;">

				<div style="height: 50px; background-color: #FFFFFF;">

					<Row type="flex" justify="start" class="code-row-bg" style="">

						<div style="height: 40px; line-height: 40px; margin-left: 10px;">

							<a style="color: #3f3f3f;" @click="Back">

								<Icon type="ios-arrow-back" size="20" />

							</a>

							<!-- 返回上一层 -->

							<a style="margin-left: 5px;" @click="Refresh">

								<Icon type="md-refresh" color="#3f3f3f" size="20" />

							</a>



							<Divider type="vertical" size="default" />

						</div>

						<Breadcrumb>

							<a style="height: 50px; line-height: 50px;color: #3f3f3f;" @click="aaaaa(index)" v-for="(item,index) in path">

								<BreadcrumbItem>

									<Icon type="ios-home-outline"></Icon>

									{{item}}

								</BreadcrumbItem>

							</a>

						</Breadcrumb>

					</Row>

				</div>

			</div>

		</div>

		<ul v-for="(item,index) in list" style="float: left;margin: 5px;" @contextmenu="showMenu(index)">

			<vue-context-menu :contextMenuData="contextMenuData" @deleted="deleted" @NewFile="NewFile"></vue-context-menu>

			<div id="div" @dblclick="dbClick(item)">

				
				<img src="../../assets/icon/6.png" width="60px" height="60px" />
				<h5>{{item}}</h5>

			</div>

		</ul>

	</div>

</template>



<script>

	import {

		exec

    } from "child_process";

    const fs = require('fs')

	export default {

		data() {

			return {

                list: [],

                smb:[],

				path: [], //面包屑路径

				contextIndex: '',

				NewFolder: false,

				FolderValue: '',

				txtvalue: [],

				filetxt: '',

				contextMenuData: {

					menuName: 'demo',

					//菜单显示的位置

					axis: {

						x: null,

						y: null

					},

					//菜单选项

					menulists: [{

						fnHandler: 'deleted', //绑定事件

						btnName: '删除', //菜单名称

					}, {

						fnHandler: 'NewFile',

						btnName: '重命名'

					}]

				}

			}

		},

		mounted() {

                var smbpath = window.sessionStorage.getItem('SMB_Path');

                smbpath = '['+smbpath+']'

                this.smb = eval(smbpath)
                // 共享路径
                var path = '/home/smb/' +this.smb[0].name;
                fs.readdir(path, (err, files)=>{
                    var bbb = 0;
                    if (err) {

                    console.log('readdir err:'+err)

                    return

                    }

                    console.log(files)
                    this.list = files

                })

                },

		methods: {

			Refresh() {

				const _this = this

                console.log(this.smb[0].name)

                var path = '/home/smb/' + _this.smb[0].name+'/'+_this.path.join("/");

                fs.readdir(path, (err, files)=>{

                    if (err) {

                    console.log('readdir err:'+err)

                    return

                    }

                    console.log(files)
                    _this.list = files
                })

			},

			showMenu(index) {

				event.preventDefault()

				var x = event.clientX

				var y = event.clientY

				// Get the current location

				this.contextMenuData.axis = {

					x,

					y

				}

				this.contextIndex = index

			},

			// 双击事件

			dbClick(row) {
				
				this.path.splice(this.path.length, 0, row);
				console.log(this.smb)
				var path = '/home/smb/'+this.smb[0].name+'/'+this.path.join("/");
				console.log(path)

				fs.readdir(path, (err, files)=>{

                    if (err) {

                    console.log('readdir err:'+err)

                    return

                    }

                    console.log(files)
                    this.Refresh()
                })
			},

			YesFolder() {

				const fs = require('fs')

				const value = this.FolderValue

				const path = '/home/smb/'+this.smb[0].name +'/' + this.path.join("/");

				fs.mkdir(path + '/' + value, function(err) {

					// 如果有错 抛出错误

					if (err) {

						throw err;

					}

				})

				this.Refresh()

				this.$Message.success("新建" + value + "成功！！！");

			},

			// 删除本地文件

			deleted() {

				const fs = require('fs')

				const index = this.contextIndex

				const name = this.list[index]

				console.log(index)

				console.log(name)

				this.$Modal.confirm({

					title: '删除操作',

					content: '<p>请确认是否删除' + name + '</p><p>删除后无法恢复。</p>',

					onOk: () => {

						fs.unlink('/home/smb/'+this.smb[0].name+ '/'+this.path.join("/") + name, (err, data) => {

							if (err) {

								this.$Message.error("删除" + name + "失败！");

								return console.error(err)

							} else {

								console.log(data)

								this.$Message.success("删除" + name + "成功");

								this.Refresh()

							}

						})

					},

					onCancel: () => {

						this.$Message.info('Clicked cancel');

					}

				});

			},

			// 重命名文件夹

			NewFile() {

				const fs = require('fs')

				const index = this.contextIndex

				const name = this.list[index]

			},

			// 返回上一层

			Back() {

				//判断是否为根目录

				if (this.path.length == 0) {

					this.$router.push("/SMB_Login");

				}

				//当前目录-1

				this.path.splice(-1, 1);

				//刷新目录

				this.Refresh();

			},

		}

	}

</script>

<style>

	.ul-li {

		float: left;

		text-align: center;

		list-style: none;

		

		width: 100px;

		overflow: hidden;

		text-overflow:ellipsis;

		white-space: nowrap;

	}

	

	.ul-li:hover{

	background-color: #e5f3ff

	} 

	

	#disk  ul  ul li  {

		height: 25px;

	}

</style>